<template>
    <fieldset>
        <legend>计数器</legend>
                                 <!-- 可以在后面加参数 -->
        <button @click="DECREMENT_NUM">-</button>
        &nbsp;
        &nbsp;
        <b>{{num}}</b>
        &nbsp;
        &nbsp;
        <button @click="add">+</button>
        <h1>{{user}}</h1>
        <button @click="GET_PRODUCT">点击获取数据</button>
        <ul>
            <li v-for="item in products" :key="item.id">{{item.title}}</li>
        </ul>

        <h1>{{reversMsg}}</h1>
        <h1>{{reversMsg}}</h1>


    </fieldset>
</template>
<script>
//如何使用vuex定义的state

// 1 使用$store直接获取
//2. 辅助函数mapState

//调用mutations中的方法 
//1. 使用commit 提交
//2. 通过辅助函数mapMutations调用

//调用actions的方法
//1 通过dispatch进行调用
//2. 辅助函数 mapActions


//调用getters
//1.$store.getters.xxx
//辅助函数mapGetters


//引入
import { mapState,mapMutations,mapActions, mapGetters } from 'vuex'

export default {
    //将状态映射到计算属性中(规律 结果就放在计算属性中去  函数放在mounted中区)

    computed: {
        //语法
     ...mapState(['num',"user",'products',"msg"] ),
     ...mapGetters(['reversMsg'])
    },
    data(){
        return{

        }
    },
    mounted () {
        // this.$store.state.num
    },
    methods: {
        // 可以当成普通方法来使用
        ...mapMutations(['DECREMENT_NUM']),
        add(){
            this.$store.commit('INCREMENT_NUM',10)
        },
        // getCart(){
        //     //调用
        //     this.$store.dispatch('GET_PRODUCT')
        // }
        ...mapActions(['GET_PRODUCT'])
    }
}
</script>